<template>
    <view class="content">
        <view class="top-content flex-row space-between">
            <view class="left m-b-20">
				<view class="classification-collection">
					<text class="p-20" @click="getInfoByTime" :class="{'text-decoration': collection == 0}">领取的资料</text>
					<text @click="getColloctionList" :class="{'text-decoration': collection == 1}">收藏的资料</text>
				</view>
				<view class="classification-time" v-if="collection == 0">
					<text class="p-20" @click="getInfoByTime" :class="{'text-red': time == 0}">按时间</text>
					<text @click="getInfoByPro" :class="{'text-red': time == 1}">按科目</text>
				</view>
			</view>
            <view class="right">
				<button type="default" v-if="!isDelete" @click="isDelete = true" class="m-r-20"><text class="red">-</text>删除</button>
				<button type="default" v-else @click="isDelete = false" class="m-r-20"><text class="red">-</text>完成</button>
				<button type="default" @click="goToPage"><text class="red">+</text>资料</button>
			</view>
        </view>
		<view :class="collection == 0 ? 'm-t-130' : 'm-t-70'">
			<swiper class="swiper" v-if="time == 1">
				<swiper-item class="swiper-item" :class="{'active': current == index}" v-for="(item, index) in hotList" @click="getSubjectInfo(item, index)" :key="index">
					<view>{{item.categoryName}}</view>
				</swiper-item>
			</swiper>
			<view class="bottom-content flex-row" v-if="list.length > 0">
				<view class="card" v-for="(item, index) in list":key="index">
					<image class="is-colloction" :src="item.isFavorite == 0 ? '../../../static/img/collection.png' : '../../../static/img/collection-active.png'" mode="" @click="changeCollection(item)"></image>
					<image class="is-delete" v-if="isDelete" src="../../../static/img/delete.png" mode="" @click="deleteData(item, index)"></image>
					<image :src="item.dataCover" class="cover" @click="goToDetailPage(item)"></image>
					<view class="title one-ellipsis" @click="goToDetailPage(item)">{{item.dataTitle}}</view>
				</view>
			</view>
			<view class="bottom-content no-data" v-else>暂无数据</view>
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			time: 0,
			list: [],
			collection: 0,
			hotList: [],
			isDelete: false,
			current: -1
        }
    },
	computed: {
	    tabAndHeight() {
			this.customBar = this.customBar - 14
	        return this.customBar
	    },
	    statusBar1() {
	        return this.statusBar
	    }
	},
	mounted() {
		this.getInfoByTime()
	},
    onShow() {
	},
    methods: {
		// 按时间获取数据列表
		getInfoByTime(){
			uni.showLoading({
				title: 'loading'
			});
			this.isDelete = false
			this.time = 0
			this.collection = 0
			this.current = -1
			this.request({
				url: `${this.baseUrl}/user/userDataList`,
				data: {},
				method: 'POST',
				success: (res) => {
					this.list = res.result
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].dataCover = this.baseUrl + this.list[i].dataCover
						this.list[i].dataFile = this.baseUrl + this.list[i].dataFile
					}
					uni.hideLoading()
				},
				fail: function(error) {
					console.log(error);
				}
			})
		},
		// 按科目获取数据列表
		getInfoByPro(){
			uni.showLoading({
				title: 'loading'
			});
			this.isDelete = false
			this.time = 1
			this.collection = 0
			this.request({
				url: `${this.baseUrl}/user/userDataListByProvince`,
				data: {},
				method: 'POST',
				success: (res) => {
					this.list = res.result
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].dataCover = this.baseUrl + this.list[i].dataCover
						this.list[i].dataFile = this.baseUrl + this.list[i].dataFile
					}
					var swiperList = []
					this.hotList = []
					for (let n = 0; n < this.list.length; n++) {
						if(swiperList.indexOf(this.list[n].categoryName) === -1){
							swiperList.push(this.list[n].categoryName)
							this.hotList.push(this.list[n])
						}
					}
					console.log(this.hotList)
					// this.getSubjectList()
					uni.hideLoading()
				},
				fail: function(error) {
					console.log(error);
				}
			})
		},
		// 收藏或取消
        changeCollection(item){
			uni.showLoading({
				title: 'loading'
			});
			let url
			if (item.isFavorite == 0){
				url = `${this.baseUrl}/user/addFavorite`
			}else{
				url = `${this.baseUrl}/user/cancelFavorite`
			}
			this.request({
				url: url,
				data: {
					id: item.id
				},
				method: 'POST',
				success: (res) => {
					item.isFavorite = item.isFavorite == 0 ? 1 : 0
					let msg = item.isFavorite == 0 ? '取消收藏' : '收藏成功！'
					uni.showToast({
					    title: msg,
					    icon: 'none',
					    duration: 2000
					});
					uni.hideLoading()
				},
				fail: function(error) {
					console.log(error);
				}
			})
		},
		// 获取学科列表
		// getSubjectList(){
		// 	uni.showLoading({
		// 		title: 'loading'
		// 	});
		// 	this.request({
		// 		url: `${this.baseUrl}/user/list`,
		// 		data: {},
		// 		method: 'GET',
		// 		success: (res) => {
		// 			this.hotList = res.list
		// 			uni.hideLoading()
		// 		},
		// 		fail: function(error) {
		// 			console.log(error);
		// 		}
		// 	})
		// },
		// 获取对应学科下的数据列表
		getSubjectInfo(item, index){
			uni.showLoading({
				title: 'loading'
			})
			this.current = index
			this.request({
				url: `${this.baseUrl}/user/list`,
				data: {
					categoryId: Number(item.categoryId)
				},
				method: 'GET',
				success: (res) => {
					this.list = res.list
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].dataCover = this.baseUrl + this.list[i].dataCover
						this.list[i].dataFile = this.baseUrl + this.list[i].dataFile
					}
					uni.hideLoading()
				},
				fail: function(error) {
					console.log(error);
				}
			})
		},
		// 收藏的资料列表
		getColloctionList(){
			uni.showLoading({
				title: 'loading'
			});
			this.collection = -1
			this.time = 0
			this.request({
				url: `${this.baseUrl}/user/userDataList`,
				data: {
					isFavorite: 1
				},
				method: 'POST',
				success: (res) => {
					this.list = res.result
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].dataCover = this.baseUrl + this.list[i].dataCover
						this.list[i].dataFile = this.baseUrl + this.list[i].dataFile
					}
					uni.hideLoading()
				},
				fail: function(error) {
					console.log(error);
				}
			})
		},
		// 删除
		deleteData(item, index){
			uni.showLoading({
				title: 'loading'
			});
			this.request({
				url: `${this.baseUrl}/user/delete`,
				data: {
					userDataIds: [item.dataId]
				},
				method: 'POST',
				success: (res) => {
					this.list.splice(index, 1)
					uni.hideLoading()
				},
				fail: function(error) {
					console.log(error);
				}
			})
		},
		// 查看资料详情
		goToPage(){
			uni.navigateTo({
				url: '/pages/views/disciplineList/index'
			})
		},
		goToDetailPage(item){
			uni.showLoading({
				title: 'loading'
			});
			wx.downloadFile({
				url: item.dataFile,
				success: function (res) {
					var Path = res.tempFilePath              //返回的文件临时地址，用于后面打开本地预览所用
					wx.openDocument({
						filePath: Path,
						success: function (res) {
							uni.hideLoading()
							// console.log('打开成功')
						}
					})
				},
				fail: function (res) {
					console.log(res);
				}
			})
		}
    }
}
</script>

<style>
.content {
    width: 100%;
	background: #FFFFFF;
	font-weight: 600;
	color: #333333;
	line-height: 50rpx;
	min-height: 100vh;
}
.top-content{
	align-items: flex-start;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #ffffff;
	z-index: 10;
}
.classification-collection{
	font-size: 30rpx;
}
.classification-time{
	font-size: 26rpx;
}
.right button{
	width: 100rpx;
	height: 45rpx;
	font-size: 24rpx;
	line-height: 40rpx;
	text-align: center;
	display: inline-block;
	padding: 0;
	border-radius: 31rpx;
	border: 2rpx solid #c1c1c1;
	box-sizing: border-box;
}
.right .red{
	color: #ff481a;
	font-size: 28rpx;
	font-weight: 400;
}
.bottom-content {
	flex-wrap: wrap;
}
.bottom-content .card{
	position: relative;
	flex: 0 0 29.333%;
	margin: 0 2% 45rpx;
}
.bottom-content .card .is-colloction{
	position: absolute;
	top: 0;
	left: 0;
	width: 44rpx;
	height: 44rpx;
	background: rgba(0, 0, 0, 0.25);
}
.bottom-content .card .is-delete{
	position: absolute;
	top: 0;
	right: 0;
	width: 44rpx;
	height: 44rpx;
}
.bottom-content .card .cover{
	width: 100%;
	height: 260rpx;
	border: 2rpx solid #c1c1c1;
	border-radius: 5rpx;
}
.swiper{
	height: 80rpx;
}
.swiper .swiper-item{
	width: 170rpx !important;
	height: 30rpx !important;
	padding: 10rpx 20rpx;
	color: #333333;
	font-size: 28rpx;
	text-align: center;
	line-height: 30rpx;
	font-weight: 500;
	border: 2rpx solid #ff5d5d;
	border-radius: 30rpx;
	margin: 0 10rpx;
}
.text-red{
	color: #ff5d5d;
}
.text-decoration{
	text-decoration: underline;
}
.m-t-130{
	margin-top: 120rpx;
}
.m-t-70{
	margin-top: 70rpx;
}
.active{
	background: #ff5d5d !important;
	color: #FFFFFF !important;
}
.no-data{
	width: 100%;
	height: 300rpx;
	line-height: 300rpx;
	font-size: 46rpx;
	font-weight: 600;
	color: #D3D3D3;
	text-align: center;
}
</style>
